<template>
	<div id="app">
		<div class="container">
			<!-- 顶部搜索框模块 -->
			<div class="form-group">
				<div class="input-group">
					<h4>品牌管理</h4>
				</div>
			</div>

			<!-- 数据表格 -->
			<table class="table table-bordered table-hover mt-2">
				<thead>
					<tr>
						<th>编号</th>
						<th>资产名称</th>
						<th>价格</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody v-if="list.length !== 0">
					<tr v-for="(item, index) in list" :key="index">
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>
						<!-- 如果价格超过100，就有red这个类 -->
						<!-- 根据price是否超过100来决定是否添加这个red的class -->
						<td :class="{'red' : item.price > 100}">
							{{ item.price }}
						</td>
						<td>{{ item.time }}</td>
						<!-- a标签默认会有点击的行为，跳转页面 -->
						<td>
							<!-- .prevent是事件修饰符-->
							<!-- 会阻止默认的点击行为 -->
							<a href="#" @click.prevent="list.splice(index, 1)">
								删除
							</a>
						</td>
					</tr>
					<tr style="background-color: #EEE">
						<td>统计:</td>
						<td colspan="2">总价钱为: {{ total }}</td>
						<td colspan="2">平均价:{{ arv }}</td>
					</tr>
				</tbody>
				<tfoot v-else>
					<tr>
						<td colspan="5" style="text-align: center">暂无数据</td>
					</tr>
				</tfoot>
			</table>

			<!-- 添加资产 -->
			<form class="form-inline">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" 
						placeholder="资产名称" v-model="obj.name"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" 
						placeholder="价格" v-model.number="obj.price"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<!-- 阻止表单提交 -->
				<button type="button" class="btn btn-primary" 
				@click="addOne">
					添加资产
				</button>
			</form>
		</div>
	</div>
	<div>{{ nextId }}</div>
</template>

<script setup>
	import {
		reactive,computed
	} from 'vue'
	const list = reactive([
		{
			id: 100,
			name: "外套",
			price: 199,
			time: new Date('2010-08-12') // 对象
		},
		{
			id: 101,
			name: "裤子",
			price: 34,
			time: new Date('2013-09-01')
		},
		{
			id: 102,
			name: "鞋",
			price: 25.4,
			time: new Date('2018-11-22')
		},
		{
			id: 103,
			name: "头发",
			price: 19900,
			time: new Date('2020-12-12')
		}
	])
	// 用来接收用户输入的数据
	const obj = reactive({
		name: '',
		price: 0
	})
	
	// 自动计算当前数组中的最大id，将最大id + 1作为下一个新添加的id
	const nextId = computed(() => {
		let id_arr = list.map(item => item.id) // 装了id的新数组
		return Math.max(...id_arr) + 1
	})
	
	const addOne = () => {
		// 收取表单的数据封装成资产对象，添加到数组
		let new_obj = {
			id: nextId.value, // 访问计算属性的结果
			name: obj.name,
			price: obj.price,
			time: new Date() // 获取当前时间
		}
		list.push(new_obj)
		obj.name = ''
		obj.price = 0
	}
	
	const total = computed(
		() => {
			let total_money = 0
			list.forEach(item => total_money += item.price)
			return total_money
		}
	)
	
	const arv = computed(
		() => {
			return total.value / list.length
		}
	)
</script>

<style scoped>
	.red {
	      color: red;
	}
</style>